<template>
  <div class="ele-body">
    <a-card class="left" :bordered="false">
      <a-tree :showLine="true" v-if="treeData.length" :tree-data="treeData" :defaultExpandAll="true" v-model:checkedKeys="checkedKeys" :checkable="true" :multiple="true"> </a-tree
    ></a-card>
    <a-card class="right" :bordered="false">
      <a-form :model="qureyInfo" :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="商品类型:">
              <a-select v-model:value="chioseOption" style="width: 120px" :options="Option" @change="serachType"> </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="type_list">
            <div class="type_item" v-for="(item, index) in r_middle" :key="item.id">
              <span>{{ item.rule_name }}:</span>
              <span :class="item.is_active ? 'active' : ''" @click="handleAll(index)">{{ item.allName }}</span>
              <span :class="subItem.is_active ? 'active' : ''" @click="getShuxing(subItem.id, subIndex, index)" v-for="(subItem, subIndex) in item.rule_attr" :key="subItem.id">{{
                subItem.attr_name
              }}</span>
            </div>
          </div>
        </a-row>
        <a-row>
          <a-form-item label="名称" style="margin-right:30px;">
            <a-input v-model:value="sousuos.product_name" />
          </a-form-item>
          <a-form-item label="SKU">
            <a-input v-model:value="sousuos.sku" />
          </a-form-item>
          <a-button style="background:#1ab394; margin-left:10px;" shape="round" :size="middle" @click="sousuoLists">
            <span style="color:#fff;" class="iconfont icon-sousuo">搜索</span>
          </a-button>
        </a-row>
      </a-form>

      <!-- 表格 -->
      <ele-pro-table ref="table" row-key="id" :datasource="cateLists" v-model:selection="selection" :columns="columns" :scroll="{ x: 'max-content' }">
        <template #toolbar>
          <a-space>
            <a-button type="primary" @click="openAddCate()">
              <template #icon>
                <plus-outlined />
              </template>
              <span>添加</span>
            </a-button>
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import qs from 'qs'
export default {
  data() {
    return {
      // 选中表格的数据
      selection: [],
      selectionChild: [],
      // 左侧树形结构的数据
      treeData: [],
      // 查询数据
      queryInfo: {
        goods_type: 2
      },
      // 商品分类的选择项
      checkedKeys: [],
      // 右边上面的已经选择
      chioseOption: [],
      // 选择列表
      Option: [],
      // 四个搜索
      sousuos: {
        product_name: '',
        sku: ''
      },
      // 右侧中间的数据
      r_middle: [],
      // 表格数据
      cateLists: [],
      // 表格的渲染
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '规格信息',
          dataIndex: 'guigeInfo'
        },
        {
          title: 'SKU编码',
          dataIndex: 'unique'
        },
        {
          title: '销售价',
          dataIndex: 'price'
        },
        {
          title: '成本价',
          dataIndex: 'cost'
        },
        {
          title: '重量',
          dataIndex: 'weight'
        },
        {
          title: '体积',
          dataIndex: 'volume'
        },
        {
          title: '库位(数)',
          dataIndex: 'storage_location'
        },
        {
          title: '库存量',
          dataIndex: 'stock'
        }
      ],
      idd: '',
      uniquee: ''
    }
  },
  created() {
    this.getTypeLists()
    this.getSelectDown()
    this.listsInit()
    console.log(this.$route.query.id, this.$route.query.unique)
    this.idd = this.$route.query.id
    this.uniquee = this.$route.query.unique
  },
  watch: {
    checkedKeys() {
      this.listChoice()
    },
    queryInfo() {
      this.listsInit()
    }
  },
  methods: {
    handleSele() {
      console.log(111)
    },
    // 初始化列表
    async listsInit() {
      const { data: res } = await this.$http.get('/depot/sku', { params: this.queryInfo })
      console.log(res)
      res.data.list.forEach(item=>{
        
        let a = item.product.product_name
        let b = item.detail_lang.join('，')
        item.guigeInfo = `${a} 【${b}】`
        
      })
      this.cateLists = res.data.list
    },
    // 获取右侧中间属性的数据
    async getSelectDown() {
      const res = await this.$http.get('/depot/rule_list')
      console.log(res.data.data)
      res.data.data.forEach(item => {
        item.allName = '全部'
        item.is_active = false
        item.rule_attr.forEach(ele => {
          ele.is_active = false
        })
      })
      this.r_middle = res.data.data
      this.queryInfo.attr_id = []
    },
    handleTable() {
      console.log(123)
    },
    // 处理属性的点击事件一列属性
    handleAll(index) {
      this.r_middle[index].is_active = !this.r_middle[index].is_active
      let arr = []
      if (this.r_middle[index].is_active == true) {
        this.r_middle[index].rule_attr.forEach(item => {
          item.is_active = true
          arr.push(item.id)
        })
        arr.forEach(item => {
          this.queryInfo.attr_id.push(item)
        })
        this.queryInfo.attr_id = Array.from(new Set(this.queryInfo.attr_id))
      } else {
        this.r_middle[index].rule_attr.forEach(item => {
          item.is_active = false
          arr.push(item.id)
        })
        arr.forEach(item => {
          let flog = this.queryInfo.attr_id.indexOf(item)
          this.queryInfo.attr_id.splice(flog, 1)
          console.log(index)
        })
      }
      this.listsInit()
    },
    // 初始化左侧树形结构
    async getTypeLists() {
      const res = await this.$http.get('/depot/column?is_new=1')
      console.log(res.data.data.list)
      this.treeData = [
        {
          title: '全部商品',
          key: -1,
          children: res.data.data.list
        }
      ]
    },
    // 获取左侧的树形组件的回调
    async listChoice() {
      let obj = {
        goods_type: 2,
        category_id: this.checkedKeys
      }
      const res = await this.$http.post('/depot/type_list', qs.stringify(obj))
      let arr = []
      console.log(res)
      res.data.data.forEach(element => {
        arr.push({ label: element.type_name, value: element.id })
      })
      this.Option = arr
      this.queryInfo.category_id = this.checkedKeys
      this.listsInit()
    },
    // 下拉选择的回调
    async serachType() {
      console.log(this.chioseOption)
      const res = await this.$http.get('/depot/rule_list?type_id=' + this.chioseOption)
      console.log(res.data.data)
      this.r_middle = res.data.data
    },
    // 点击属性单个属性
    async getShuxing(id, childIndex, index) {
      this.r_middle[index].rule_attr[childIndex].is_active = !this.r_middle[index].rule_attr[childIndex].is_active
      if (this.r_middle[index].rule_attr[childIndex].is_active) {
        this.queryInfo.attr_id.push(id)
        this.queryInfo.attr_id = Array.from(new Set(this.queryInfo.attr_id))
      } else {
        let flog = this.queryInfo.attr_id.indexOf(id)
        this.queryInfo.attr_id.splice(flog, 1)
      }
      this.listsInit()
    },
    // 商品搜索
    async sousuoLists() {
      this.queryInfo.product_name = this.sousuos.product_name
      this.queryInfo.sku = this.sousuos.sku
      this.listsInit()
      // 清除数据
      this.sousuos = {
        product_name: '',
        sku: ''
      }
      this.$message.success('搜索成功！')
    },
    // 入库时间点击确定的回调
    crateTimeChange() {
      console.log(moment(this.createTime[0]).format('YYYY-MM-DD h:mm:ss'))
      this.sousuos.create_time_start = moment(this.createTime[0]).format('YYYY-MM-DD h:mm:ss')
      this.sousuos.create_time_end = moment(this.createTime[1]).format('YYYY-MM-DD h:mm:ss')
    },
    // 更新时间点击确定的回调
    updateTimeChange() {
      console.log(moment(this.updateTime[0]).format('YYYY-MM-DD h:mm:ss'))
      this.sousuos.update_time_start = moment(this.updateTime[0]).format('YYYY-MM-DD h:mm:ss')
      this.sousuos.update_time_end = moment(this.updateTime[1]).format('YYYY-MM-DD h:mm:ss')
    },
    // 编辑
    editRowIndex(row) {
      console.log(row)
      this.$router.push({ path: '/depot/list/edit', query: { id: row.id } })
    },
    onSelect(record) {
      console.log(record)
      record.attrs.forEach(item => {
        this.selection.push(item)
      })
      console.log(this.selection)
    },
    // 删除
    async delRowIndex(row) {
      const { data: res } = await this.$http.delete('/depot/' + row.id)
      if (res.code != 0) this.$message.warning('删除失败')
      this.$message.success('删除成功')
    },
    // 采购
    purchaseRowIndex(row) {
      console.log(row)
    },
    // 添加商品
    async openAddCate() {
      console.log(this.uniquee, this.idd)
      console.log(this.selection)
      let obj = {
        product_id: this.idd,
        sku_unique: this.uniquee,
        depot_sku: []
      }
      this.selection.forEach(item => {
        if (!('attrs' in item)) {
          obj.depot_sku.push({
            depot_product_id: item.product_id,
            depot_sku_unique: item.unique
          })
        }
      })
      const res = await this.$http.post('/product/has_depot', qs.stringify(obj))
      console.log(res)
      if (res.data.code != 0) return this.$message.warning('关联失败')
      this.$message.success('关联数据成功')
      this.$router.push('/goods/list')
    }
  }
}
</script>

<style lang="less" scoped>
.ele-body {
  display: flex;
  height: 100%;
  .left {
    width: 15%;
    margin-right: 1%;
    height: 100%;
  }
  .right {
    width: 84%;
    height: 100%;
  }
  .type_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border-top: 1px solid #47474757;
    border-right: 1px solid #47474757;
    .type_item {
      height: 40px;
      border-bottom: 1px dashed #9b95958a;
      span {
        font-size: 16px;
        line-height: 40px;
        color: #000;
        margin-right: 20px;
        cursor: pointer;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
          'Noto Color Emoji';
      }
      span:first-child {
        color: #00000085;
        width: 80px;
        margin-right: 0px;
        display: inline-block;
        white-space: nowrap;
      }
      span:nth-child(2) {
        font-weight: 600;
        color: #2222228a;
        letter-spacing: 2px;
      }
    }
  }
}
.active {
  color: red !important;
  font-weight: 600 !important;
}
</style>
